<template>
  <a-drawer v-if="visible" :append-to-body="true" :width="540" :visible="visible" :closable="false"
    @ok="onSave()" @cancel="onClose()" ok-text="保存">
    <template #title>
      <EditableText v-model:value="flowNodeConfig.name" @change="onNodeNameChange" />

    </template>

    <div class="top-tips">满足以下条件时进入当前分支</div>
    <section class="fd-setting-box">
      <div class="setting-main-panel">
        <a-form :auto-label-width="true" :style="{ width: '600px' }">
          <a-form-item field="cancelable" tooltip="$ 表示流程实例参数" label="表达式">
            <a-input v-model="flowNodeConfig.conditionRule" placeholder="请输入表达式" allow-clear>
            </a-input>
          </a-form-item>
        </a-form>
      </div>
    </section>


  </a-drawer>
</template>

<script setup>
import useApp from "@/hooks";
const { $ } = useApp();
import EditableText from "@/components/common/EditableText.vue";
const flowNodeConfig = ref(null)
const visible = ref(false); // 是否显示
import { NODE } from "../common/FlowConstant";
$.on(NODE.EXCLUSIVE_GATEWANY + '-drawer-open', config => {
  flowNodeConfig.value = config;
  visible.value = true;
})
function onClose(params) {
  visible.value = false;
}
const onNodeNameChange = (name) => {
  flowNodeConfig.value.name = name;
};
function onSave(){
  onClose()
}
// 新增条件组
function addConditionGroup() {

}
</script>

<style lang="less">
.top-tips {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  color: #646a73;
}

.or-branch-link-tip {
  margin: 10px 0;
  color: #646a73;
}

.condition-group-editor {
  user-select: none;
  border-radius: 4px;
  border: 1px solid #e4e5e7;
  position: relative;

  .branch-delete-icon {
    font-size: 18px;
  }

  .arco-icon {
    cursor: pointer;

    &:hover {
      color: #3370ff;
    }
  }

  +.condition-group-editor {
    margin-top: 8px;
  }

  .header {
    background-color: #f4f6f8;
    padding: 0 12px;
    font-size: 14px;
    color: #171e31;
    height: 36px;
    display: flex;
    align-items: center;

    span {
      flex: 1;
    }
  }

  .main-content {
    padding: 0 12px;

    .condition-relation {
      color: #9ca2a9;
      display: flex;
      align-items: center;
      height: 36px;
      display: flex;
      justify-content: space-between;
      padding: 0 2px;
    }

    .val-content {
      margin-top: 8px;
    }

    .condition-content {
      margin-top: 8px;

      .value-select {
        margin-top: 8px;
        display: flex;
        box-sizing: border-box;
        width: 100%;
        padding: 0 8px 0 12px;
        color: var(--color-text-1);
        font-size: 14px;
        background-color: var(--color-fill-2);
        border: 1px solid transparent;
        border-radius: var(--border-radius-small);

        &:hover {
          background-color: var(--color-fill-3);
          border-color: transparent;
        }

        .content {
          flex: 1;
          padding: 0 0 4px 0;
          display: flex;
          align-items: center;
          min-height: 31.6px;
          flex-wrap: wrap;

          .item-tag {
            background-color: #f9f9f9;
            font-size: 12px;
            cursor: pointer;
            padding: 2px 4px;
            border-radius: var(--border-radius-small);
            margin: 4px 4px 0 0;

            &:hover {
              background-color: #fff;
            }
          }
        }

        .btn {
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
  }

  .sub-content {
    padding: 12px;
  }
}

.operate {
  margin-top: 12px;
}
</style>
